<template>
  <el-dialog
    top="80px"
    :visible.sync="isVisible"
    :title="title"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-container>
      <el-main :style="{ 'max-height': maxHeightDialog }">
        <div class="div-query" style="margin-top: 10px">
          <div class="collapse">
            <div class="collapse-header" @click="panelActive = !panelActive">
              <i
                class="collapse-header-icon"
                :class="[
                  panelActive ? 'el-icon-caret-bottom' : 'el-icon-caret-top',
                ]"
              />
              {{ panelActive ? '隐藏' : '展开' }}查询条件
            </div>
            <div class="collapse-content">
              <el-collapse-transition>
                <div v-show="panelActive">
                  <el-form size="small" label-position="right">
                    <el-row>
                      <el-col :span="12">
                        <el-form-item label="设备名称" label-width="80px">
                          <el-input
                            v-model="searchModel.deviceName"
                            placeholder="输入设备名称"
                            clearable
                            class="filter-item search-item"
                          />
                        </el-form-item>
                      </el-col>

                      <el-col :span="12">
                        <el-form-item label="设备序列号" label-width="100px">
                          <el-input
                            v-model="searchModel.deviceSn"
                            placeholder="输入设备序列号"
                            clearable
                            class="filter-item search-item"
                          />
                        </el-form-item>
                      </el-col>

                      <el-col :span="24" style="text-align: center">
                        <el-form-item>
                          <el-button
                            type="primary"
                            icon="el-icon-search"
                            @click="toSearch"
                            style="margin-right: 10px"
                            >搜索</el-button
                          >
                          <el-button
                            type="info"
                            icon="el-icon-delete"
                            @click="toReset"
                            style="margin-right: 10px"
                            >重置</el-button
                          >
                          <el-button size="small" @click="getDataList">
                            <i class="el-icon-refresh" style="color: #606266" />
                            <span style="color: #606266">刷新</span>
                          </el-button>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form>
                </div>
              </el-collapse-transition>
            </div>
          </div>
        </div>

        <div style="margin-top: 10px">
          <div v-if="selectedDataList.length != 0" class="alert-div">
            <i class="el-icon-info" style="color: #1890ff; margin-right: 3px" />
            已选择
            <strong style="color: #1890ff; margin: 0px 1px; font-size: 15px">
              {{ selectedDataList.length }}
            </strong>
            项
            <el-button
              type="text"
              style="padding: 10px"
              @click="toEmptySelection"
              >清空</el-button
            >
          </div>

          <el-popover v-model="popoverVisible" placement="top" trigger="manual">
            <i class="el-icon-question" style="color: rgb(255, 153, 0)" />
            <span>
              确定要删除已选的
              <strong style="color: #1890ff; margin: 0px 1px">
                {{ selectedDataList.length }}
              </strong>
              项数据吗？
            </span>
            <div style="text-align: right; margin-top: 10px">
              <el-button size="mini" type="text" @click="popoverVisible = false"
                >取消</el-button
              >
              <el-button
                type="primary"
                size="mini"
                @click="toBatchDeleteConfirm"
                >确定</el-button
              >
            </div>
            <el-button
              slot="reference"
              size="small"
              type="danger"
              icon="el-icon-delete"
              @click="toBatchDelete"
            >
              批量删除
            </el-button>
          </el-popover>

          <el-popover
            v-model="popoverAllVisible"
            placement="top"
            trigger="manual"
          >
            <i class="el-icon-question" style="color: rgb(255, 153, 0)" />
            <span> 确定要删除全部数据吗？ </span>
            <div style="text-align: right; margin-top: 10px">
              <el-button
                size="mini"
                type="text"
                @click="popoverAllVisible = false"
                >取消</el-button
              >
              <el-button type="primary" size="mini" @click="toAllDeleteConfirm"
                >确定</el-button
              >
            </div>
            <el-button
              slot="reference"
              size="small"
              type="danger"
              icon="el-icon-delete"
              @click="toAllDelete"
            >
              全部删除
            </el-button>
          </el-popover>
        </div>

        <div style="margin-top: 10px">
          <el-table
            ref="elTable"
            v-loading="loading"
            border
            fit
            size="medium "
            :data="dataList"
            :row-key="(row) => row.id"
            style="width: 100%"
            :element-loading-text="deleteLoading ? '删除中,请等待...' : ''"
            @selection-change="onSelectionChange"
          >
            <el-table-column
              align="center"
              type="selection"
              width="40"
              :reserve-selection="true"
            />

            <el-table-column
              align="center"
              type="index"
              width="50"
              label="#"
              :index="indexMethod"
            />

            <el-table-column align="center" label="姓名" prop="personName" />
            <el-table-column align="center" label="身份证号" prop="sfzh" />

            <el-table-column
              align="center"
              label="设备序列号"
              prop="deviceSn"
            />
            <el-table-column
              align="center"
              label="设备名称"
              prop="deviceName"
            />
            <el-table-column
              align="center"
              label="设备类型"
              prop="deviceType"
            />
          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="pagination.pageNum"
            :limit.sync="pagination.pageSize"
            :page-sizes="pageSizeOptions"
            @pagination="getDataList"
          />
        </div>
      </el-main>
      <el-footer>
        <el-button
          size="medium"
          icon="el-icon-close"
          style="width: 120px"
          @click="isVisible = false"
        >
          关闭
        </el-button>
      </el-footer>
    </el-container>
  </el-dialog>
</template>
<script>
import dataTableMixins from '@/mixins/data-table-mixins'
import Pagination from '@/components/Pagination'
import EpidemicPreventionManageApi from '@/api/epidemic-prevention-manage'
export default {
  name: 'PersonnelBelongDevices',
  components: {
    Pagination,
  },
  mixins: [dataTableMixins],
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    item: {
      type: Object,
      default: () => {
        return {}
      },
    },
  },
  data() {
    return {
      popoverVisible: false,
      deleteLoading: false,

      popoverAllVisible: false,
    }
  },
  computed: {
    isVisible: {
      get() {
        return this.dialogVisible
      },
      set() {
        this.toClose()
      },
    },
  },
  mounted() {
    this.getDataList()
  },
  methods: {
    toClose() {
      this.$emit('close')
    },
    getDataList() {
      this.loading = true
      const searchModel = {
        sfzh: this.item.item.sfzh,
      }
      EpidemicPreventionManageApi.getPersonDevices({
        ...this.pagination,
        ...searchModel,
        ...this.searchModel,
        ...this.sort,
      })
        .then((res) => {
          if (res.data.code == 200) {
            this.dataList = res.data.data.rows
            this.dataList.forEach((ele, i) => {
              this.selectedDataList.forEach((multEle, j) => {
                if (this.dataList[i].id === this.selectedDataList[j].id) {
                  this.$refs.elTable.toggleRowSelection(this.dataList[i], true)
                }
              })
            })
            this.total = res.data.data.total
            this.loading = false
          }
        })
        .catch(() => {
          this.loading = false
          this.dataList = []
          this.total = 0
        })
    },
    toSearch() {
      this.pagination.pageNum = 1
      this.getDataList()
    },
    toReset() {
      this.searchModel = {}
      this.sort = {}
      this.$refs.elTable.clearSort()
      this.$refs.elTable.clearFilter()
      this.toSearch()
    },
    onSelectionChange(selection) {
      this.selectedDataList = selection
    },
    toEmptySelection() {
      this.$refs.elTable.clearSelection()
    },
    indexMethod(index) {
      return this.formatIndex(index, this.pagination)
    },

    toBatchDelete() {
      if (this.selectedDataList.length === 0) {
        this.$message({
          message: '请先选择需要删除的数据',
          type: 'warning',
          duration: 4000,
        })
        return
      } else {
        this.popoverVisible = true
      }
    },
    toBatchDeleteConfirm() {
      this.popoverVisible = false
      const deleteData = []
      this.selectedDataList.forEach((ele) => {
        deleteData.push({
          id: ele.id,
          deviceId: ele.deviceSn,
          manufactureType: 'RJ-FY-PA09',
          personIdNumber: ele.sfzh,
          personName: ele.personName,
        })
      })
      this.deleteConfirm(deleteData)
    },
    deleteConfirm(deleteData) {
      // console.log('deleteData=', deleteData)
      this.deleteLoading = true
      EpidemicPreventionManageApi.deleteDevicePersonsDstributionRecords(
        deleteData
      )
        .then((res) => {
          this.$message.success('删除成功！')
          this.deleteLoading = false
          this.toEmptySelection()
          this.toSearch()
        })
        .catch(() => {
          this.deleteLoading = false
        })
    },

    toAllDelete() {
      this.popoverAllVisible = true
    },
    toAllDeleteConfirm() {
      this.popoverAllVisible = false
      const deleteData = {
        personId: this.item.item.id,
      }
      this.deleteLoading = true
      EpidemicPreventionManageApi.deletePersonAllDevices(
        deleteData
      )
        .then((res) => {
          this.$message.success('删除成功！')
          this.deleteLoading = false
          this.toEmptySelection()
          this.toSearch()
        })
        .catch(() => {
          this.deleteLoading = false
        })
    },
  },
}
</script>
<style scoped lang="scss">
@import '../../../../../styles/part-custom';
</style>
